<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
	
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href= "${ctx}/css/lipe.css"/>
    <link rel="stylesheet" href="${ctx}/js/slide/slide.css" />
<!--      <script src="js/jquery-1.10.2.min.js"></script> -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <%@ include file="/header.jsp"%> 
    <div id="content"> 
    <section class="container margin-lg">
        <div class="u-list" style="max-width: 210px;">
            <div id="logodiv" class="img-box-r">
                 <c:if test="${empty currentUser.logo}">  
               			  <img src="${ctx}/images/icon_head_big.png" alt="" style="max-width: 220px;">
                 </c:if>
                 <c:if test="${not empty currentUser.logo}">
                         <img src="${sysparam.IMAGE_PREFIX_URL}/${currentUser.logo}" alt="" style="max-width: 220px;"/>
                 </c:if>
            </div> 
        </div>
        
        <div class="pull-right" style="width: 730px;">
       
                 <p><span>头像:</span>  
					       <input id="logofile" name="files"  class="required " type="file">    
					       <input  type="button" value="上传头像" onclick="uploadLogo('logofile');" ></input>
					 </p>
					  <form id="personcenterForm">  
	            <div style="width:280px">
					  <input name="customerid" id="customerid" type="hidden" value="${currentUser.customerid}">
                      <input name="logo" id="logo" type="hidden" value="${currentUser.logo}">  
                       <input name="goodat_style" id="goodat_style" type="hidden" value="${currentUser.goodat_style}">  
		            <p><label>姓名:</label> <input name="realname" value="${currentUser.realname}"  class="required  "> </p>
		            <p><label>手机:</label> <input name="phone"  value="${currentUser.phone}" class="required  "> </p>
		            <p><span>邮箱:</span> <input name="email" value="${currentUser.email}"  class="required  "> </p>
		            <p><span>设计公司:</span> <input name="orgname"  value="${currentUser.orgname}"  class="required  "> </p>
	            </div>
	            <p><span>个人简介:</span><textarea  style="width:900px;height:160px"   name="profile">${currentUser.profile}</textarea></p>
	            <div  >
						<span>请选择擅长的风格：</span><br />
						<input class="the_style" type="checkbox" value="中式">中式</input>
						<input class="the_style" type="checkbox" value="日式">日式</input>
						<input class="the_style" type="checkbox" value="东南亚">东南亚</input>
						<input class="the_style" type="checkbox" value="欧式">欧式</input>
						<input class="the_style" type="checkbox" value="美式">美式</input>
					</div>
						<div class="total_style_bottom">
						<input class="the_style_1" type="checkbox" value="法式">法式</input>
						<input class="the_style_2" type="checkbox" value="地中海">地中海</input>
						<input class="the_style_3" type="checkbox" value="新古典">新古典</input>
						<input class="the_style_4" type="checkbox" value="现代简约">现代简约</input>
						<input class="the_style_5" type="checkbox" value="乡村田园">乡村田园</input>
						<input class="the_style_6" type="checkbox"  value="其它">其它</input>
					</div>
                        </form>
             <p> </p>
            <div>
                <input value="保存基本信息"  type="button" onclick="dosubmit()"></input> <input type="button" value="添加作品 +" onclick="cloneDesgin();" ></input>
            </div>
            <p> </p>
            <div id="caseList">
	            <div id="casetemp" name="mycasebox" class="hide" style="border: 1px solid #000;margin-top: 5px;padding: 10px; ">
					
					 <p><span>作品名称:</span> <input name="casename"><br>
					    <span>装修风格:</span> 
							<select name="style">
							   <option>中式</option>
							   <option>日式</option>
							   <option>东南亚</option>
							   <option>欧式</option>
							   <option>美式 </option>
							   <option>法式</option>
							   <option>地中海 </option>
							   <option>现代简约</option>
							   <option>乡村田园</option>
							   <option>其它</option>
							</select>
						<br>  
						
					    <span>房屋大小(m2):</span> <input  style="IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')"   name="roomsize" type="text" /><br>
					    <span>房屋地址:</span> <input name="address"><br>
					    <input name="pics"  type="hidden" >  
					       <input id="files" name="files" accept="image/jpg, image/x-ms-bmp, image/png"   multiple="multiple" class="required files" style="width: 200px;" type="file">  <input class="uploadfile" type="button" value="上传作品"></input>
 					 </p>
					 <div class="caseimageList"> 
<!-- 					 	  <div class="img-box-r"> -->
<!-- 				                <img name="desc_img" id="img_"  alt=""/> -->
<!-- 				            </div>  -->
					 </div>
					 
					 <div>  <input class="savecase" type="button" value="保存"></input> </div>
					  
	            </div>
            </div>
				 <div style=" margin-top: 15px;  ">
               		   <input value="提交设计师认证"  type="button" onclick="doAuth()"></input> 
                </div>
         </div>
    
    </section>

    <div class="container">

    </div>
 </div>
 
       <%@ include file="/footer.jsp"%> 
            <script src="${ctx}/js/ajaxfileupload.js"></script>
           <script type="text/javascript">
           
           function deletepic(obj){
			 $( obj ).remove();       	   
           }
            
           function copy(obj){
        	    var desginid =  obj.designcaseid ;
	           	var currentDIV = $("#casetemp").clone();
	           	currentDIV.removeClass("hide") ;
	           	currentDIV.attr("id","case"+desginid) ;
	           	
	           	currentDIV.find("input[name='casename']").val(obj.name) ;
	           	currentDIV.find("input[name='roomsize']").val(obj.roomsize) ;
	           	currentDIV.find("input[name='address']").val(obj.address) ;
 	        	currentDIV.find("select").val(obj.style);
	           	
	           	currentDIV.find(".files").attr("id", desginid   );
	            currentDIV.find("img[name='desc_img']").attr("id","img_"+desginid   );
	           	currentDIV.find(".uploadfile").attr("onclick","uploadImage('"+desginid +"');" );
	           	$.each(obj.picList, function (index, element){
	           	 	var image =  "<div id="+ element+" class=\"img-box-r\">" + 
	                "<img src= \"${sysparam.IMAGE_PREFIX_URL}/"+ element +"?imageView2/1/w/240/h/200\"/>" +
	                "<a href=\"javascript:deletepic('#case"+desginid+" #"+element +"')\" style=\"position: relative; bottom: 0px;display: block; width: 240px;text-align: center;color: red;text-decoration: underline;\">删除</a>" 
	                "</div> " ;
		           	currentDIV.find(".caseimageList").append(image); 
        		}) ;
	           	currentDIV.find(".savecase").attr("onclick","saveCase('"+desginid +"');" );
	        	$("#caseList").append(currentDIV) ;
           }
           
           $(document).ready(function(){
        	   
        	    var listjson = '${listJSON}';
        	    var caseList = JSON.parse(listjson) ;
        	    
        	    $.each(caseList, function (index, element){
        	    	  console.log(element);
        	    	  copy(element) ;
        		}) ;
        	    
        	    var list = $("#goodat_style").val().split(",");
        		$.each(list, function (index, element){
        			  $("#personcenterForm input[type='checkbox'][value='"+element+"']").prop("checked",true);
        		}) ;
           });
           
    function uploadImage(id){
		 $.ajaxFileUpload({
	            url: '${ctx}/file/qiniuFileUpload.do', 
	            type: 'post',
	            secureuri: false,             //一般设置为false
	            fileElementId: id,    // 上传文件的id、name属性名
	            dataType: 'json',             //返回值类型，一般设置为json、application/json
	            success: function(res, status){
	            	 
	            	if(res.code == "0000"){
	            		 var listimage = res.data.split(",");
	            		 var length = listimage.length ;
	            		// $("#case"+id+" .img-box-r").empty();
	            		console.log(length) ;
	            		 for(var i=0;i<length;i++){
							var element = listimage[i]; 
							var desginid= id;
							 var image =  "<div id="+element+" class=\"img-box-r\">" + 
				                "<img src= \"${sysparam.IMAGE_PREFIX_URL}/"+ element +"?imageView2/1/w/240/h/200\"/>" +
				                "<a href=\"javascript:deletepic('#case"+desginid+" #"+element +"')\" style=\"position: relative; bottom: 0px;display: block; width: 240px;text-align: center;color: red;text-decoration: underline;\">删除</a>" 
				                "</div> " ;
				                $("#case"+id).find(".caseimageList").append(image); 
	            		 }
	            		 $("#case"+id).data("pics" , res.data);
	            	}else{
						alert(res.msg) ;	            		
	            	}
	            },
	            error: function(data, status, e){ 
	            }
	        });
	 }
    
    function uploadLogo(id){
		 $.ajaxFileUpload({
	            url: '${ctx}/file/qiniuFileUpload.do',
	            type: 'post',
	            secureuri: false,             //一般设置为false
	            fileElementId: id,    // 上传文件的id、name属性名
	            dataType: 'json',             //返回值类型，一般设置为json、application/json
	            success: function(res, status){
	            	
	            	if(res.code == "0000"){
	            		 $("#logodiv img").attr("src",'${sysparam.IMAGE_PREFIX_URL}/'+ res.data);
	            		 $("#logo").val(res.data);
	            	}else{
						alert(res.msg) ;	            		
	            	}
	            },
	            error: function(data, status, e){ 
	            }
	        });
	 }
    
    function Design(){
    	this.style= '';	
    	this.name= '';	
    	this.roomsize= '';	
    	this.address= '';	
    	this.pics= '';
    }
    
    //认证
    function doAuth(){ 
    	var designlist =[];
    	$.each( $("#caseList").find("div[name='mycasebox']").not("div[id='casetemp']"),function(index,elemet){
    		  var design = new Design();
    		  design.userid = $("#customerid").val(); 
    		  design.name =  $(this).find("input[name='casename']").val();
    		  design.style =  $(this).find("select option:selected").text(); 
    		  design.roomsize =  $(this).find("input[name='roomsize']").val();	
    		  design.address =  $(this).find("input[name='address']").val();
    		  design.pics =  $(this).data("pics")
    		  designlist.push(design);
    	});	
    	var data =  {json:JSON.stringify(designlist) } ;
    	$.ajax({
    		 url:'${ctx}/customer/authCustomer.do',
			 data: data,
    		 success:function(data){
    			    data = JSON.parse(data) ;
	       			if(data.code == '0000'){
	       				 alert('认证提交成功');
	       			}else{
	       				 alert('认证提交失败');
	       			}
	   			}
    	})
    }
    
    function saveCase(id){
    	  var $this = $("#case"+id) ;
    	  var design = new Design();
    	  design.designcaseid = id ;
 		  design.name =  $this.find("input[name='casename']").val();
		  design.style =   $this.find("select option:selected").text(); 
		  design.roomsize =   $this.find("input[name='roomsize']").val();	
		  design.address =   $this.find("input[name='address']").val();
		  
		  var imageList = new Array();
		  $.each( $this.find(".img-box-r"), function(index,element){
			  imageList.push( $(this).attr("id") );
		  }); 
		  design.pics = imageList.join(",") ;
		  $.ajax({
   		  url:'${ctx}/customer/saveDesignCase.do',
			     data: design,
   		         success:function(data){
   			          //  data = JSON.parse(data) ;
	       			  if(data.code == '0000'){
	       				  alert('保存成功');
	       			  }else{
	       				  alert('保存失败');
	       			   }
	   			}
   	    });
    }
    
    //提交基本信息
    function dosubmit(){
    	
    	var array = new Array();
    	$.each($("#personcenterForm input[type='checkbox']:checked") ,function(index,element){
    		array.push($(this).val());
    	});
    	
    	if(array.length > 0){
    		$("#goodat_style").val(array.join(",")) ;
    	}
   	    
    	 $("#personcenterForm").ajaxSubmit({
				 url:'${ctx}/customer/saveProfile.do',
				 success:function(data){
		       			if(data.code == '0000'){
		       				 alert('基本信息保存成功');
		       			}else{
		       				 alert('基本信息保存失败');
		       			}
		   			}
    	  });
    }
    
    function removeDesgin(desginid){
    	$("#case"+desginid).remove();
    }
    
    function cloneDesgin(){
    	var desginid = new Date().getTime();
    	var currentDIV = $("#casetemp").clone();
    	currentDIV.removeClass("hide") ;
    	currentDIV.attr("id","case"+desginid) ;
    	currentDIV.find(".files").attr("id", desginid   );
     	currentDIV.find("img[name='desc_img']").attr("id","img_"+desginid   );
    	currentDIV.find(".uploadfile").attr("onclick","uploadImage('"+desginid +"');" );
    	currentDIV.find(".savecase").attr("onclick","saveCase('"+desginid +"');" );
    	$("#caseList").append(currentDIV) ;
    }
    
    </script>
    
     
</body>
</html>